<div class="image-list mg10" id="image-list">
  <ul class="clearfix">
  <tag:photoImage id="vo">
    <li class="image-list-item pd8"><img src="{$vo.url}"/></li>
  </tag:photoImage>
  </ul>
</div>

<script type="text/javascript">

  //事件代理
  function delegate ( type, obj, target, callback ) {
    obj.addEventListener( type, fun, false );
    function fun( e ) {
      var p = e.target;
      while ( p ) {
        if( p.nodeName.toLowerCase() === target.toLowerCase() ) {
          callback && callback.apply( p );
        }
        p = p.parentNode;
      }
    }
  }
  
  (function(){
    
    var imageList = document.getElementById("image-list"),
        imageListLi = imageList.getElementsByTagName("li"),
        startX = 0,
        translateX = 0,
        clientWidth = document.documentElement.clientWidth,
        clientHeight = document.documentElement.clientHeight,
        index = 0;
    
    //标记位置
    for ( var i=0; li=imageListLi[i]; i++ ) {
      li.index = i;
    }
    
    //代理，点击展示照片
    delegate( "click", imageList, "li", function(){
      index = this.index;
      showPic();
    });
    
    //展示照片
    function showPic() {
      
      var imageView = document.createElement("div"),
          imageViewInner = document.createElement("ul"),
          imageViewClose = document.createElement("span"),
          html = "";
      
      for ( var i=0; li=imageListLi[i]; i++ ) {
        var src = li.children[0].getAttribute("src");
        html += "<li class='tc fl' style='height: " + clientHeight + "px; line-height:" + clientHeight + "px; width: " + clientWidth + "px'>"
             +"<img src='" + src + "' />"
             +"</li>";
      }
      
      //关闭按钮
      imageViewClose.setAttribute("class", "close");
      imageViewClose.innerHTML = "×";
      document.body.appendChild( imageViewClose );
      
      //关闭并删除DOM
      imageViewClose.addEventListener( "click", function( e ) {
        this.style.display = "none";
        imageView.style.opacity = 0;
        setTimeout( function() {
          document.body.removeChild( imageView );
          document.body.removeChild( imageViewClose );
        }, 1000 )
      }, false)
      
      //显示大图的层
      imageView.setAttribute("id", "imageView");
      imageView.setAttribute("class", "image-view transition");
      imageViewInner.setAttribute("class", "clearfix transition");
      imageViewInner.style.width = clientWidth * imageListLi.length + "px";
      imageViewInner.innerHTML = html ;
      imageView.appendChild( imageViewInner );
      document.body.appendChild( imageView );
      
      //点击某一张图片后定位到这种图片上
      imageView.children[0].style.WebkitTransform = "translateX(" + -index*clientWidth + "px)";
      
      //监听touch事件
      imageView.addEventListener( "touchstart", touchStart, false );
      imageView.addEventListener( "touchmove", touchMove, false );
      imageView.addEventListener( "touchend", touchEnd, false );
    }
    
    
    function touchStart( e ) {
      e.preventDefault();
      var touch = e.touches[0];
      startX = touch.pageX;
    }
    function touchMove( e ) {
      e.preventDefault();
      var touch = e.touches[0];
      var x = touch.pageX - startX;
      translateX = x; //滑动了多少距离
      this.children[0].style.WebkitTransitionDuration = "0ms";
      this.children[0].style.WebkitTransform = "translateX(" + (-index*clientWidth + x) + "px)";
    }
    function touchEnd( e ) {
      e.preventDefault();
      if( Math.abs(translateX) > clientWidth/3 ) { 
        translateX > 0 ? index-- : index++;
        (index < 0) && (index = 0);
        (index > imageListLi.length - 1) && (index = imageListLi.length - 1);
      }
      translateX = 0; //重置
      this.children[0].style.WebkitTransitionDuration = "200ms";
      this.children[0].style.WebkitTransform = "translateX(" + -index*clientWidth + "px)";
    }
  })()
</script>